@charset 'utf-8';
@import "public/_config.scss";
body{
	background-color: rgba(0,0,0,0.3);
	.fixed{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0,0,0,0.3);
	}
	.screen{
		background-color: #f0f0f0;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: pxToRem(640);
		border-radius: pxToRem(14);
		height: pxToRem(838);
		.title{
			@include flex-box();
			padding: pxToRem(34) pxToRem(40) pxToRem(30);
			@include border-bottom-m;
			&::after{
			    border-color: #b1b1b1;
			};
			.rule{
				@include flex-item();
				text-align: left;
				font-size: pxToRem(32);
				padding-left: pxToRem(40);
				@include set-bg-img( $name: "icon-rule.png", $size: pxToRem(28) auto, $position: left center);
				vertical-align: middle;
			}
			.close{
				width: pxToRem(26);
				height: pxToRem(26);
				@include set-bg-img( $name: "icon-close.png", $size: pxToRem(26) auto, $position: center center);
				@include prefixCss3($property: align-self, $value: center);
			}
		}	
		.content{
			margin: pxToRem(34) pxToRem(40);
			color: #999;
			@extend  %scroll;
			.one{
				margin-bottom: pxToRem(54);
				.til{
					font-size: pxToRem(28);
					line-height: pxToRem(40);
					.num{
						display: inline-block;
						font-size: pxToRem(22);
						height: pxToRem(30);
						line-height: pxToRem(30);
						width: pxToRem(30);
						text-align: center;
						background-color: #999;
						color: #fff;
						margin-right: pxToRem(12);
						border-radius: 50%;
					}
				}
				.message{
					font-size: pxToRem(28);
					line-height: pxToRem(40);
					padding-left: pxToRem(40);
				}
			}
		}	
	}
}


